<template>
  
  <view class="content">
	
    <view class="fixed-wrapper">
      <!-- 自定义导航栏 -->
	  <!--刘海屏自适应高度 -->
	  <view class="fit" v-if="fit" >
	  </view>
	  <!--刘海屏自适应高度 -->
	  <view style="padding-top:10upx;width: 100%;"></view>
      <view
        class="custom-navbar d-flex a-center j-sb"
        style="height: 60upx;"
      >
	  
        <!-- <image src="../../static/images/logo1.png" style="width: 225upx;height: 60upx;margin-left: 30upx;" mode=""></image> -->
        <image
          src="/static/images/logo.png"
          style="width: 225upx;height: 36upx;margin-left: 30upx;"
          mode=""
          @tap="skipToColumnList"
        ></image>
		
        <view class="d-flex mr-3">

          <view class="d-flex a-center">
            <view
              class="iconfont icon-dingwei mr-1"
              style="color: #1C6DB4;"
            ></view>
            <text
              @tap="skipToCitySwitchPage(locationInfo.name)"
              class="font-28"
            >{{ locationInfo.name }}</text>
          </view>
        </view>
		
      </view>
      <!-- 顶部选项卡 -->
      <scroll-view
        scroll-x="true"
        :scroll-into-view="scrollPosition"
        class="scroll-row options-card"
        style="height: 80rpx;padding-left: 30rpx;"
        scroll-with-animation="true"
        show-scrollbar="false"
      >
        <view
          v-for="(item, index) in titleList"
          :key="index"
          class="scroll-row-item mx-2"
          :id="'item' + index"
          @click="switchTab(index, item.channelId)"
          :class="tabIndex === index ? 'nav-bottom-select' : ''"
          style="height: 76rpx;line-height: 76rpx;"
        >
          <text class="font-md">{{ item.channelName }}</text>
        </view>
      </scroll-view>
	  <!-- <svg t="1623999985006" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4499" width="20" height="32"><path d="M904 160H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z m0 624H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z m0-312H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z" p-id="4500" fill="#707070"></path></svg> -->
      
	  <!-- 搜索按钮 -->
	  <view
        class="iconfont icon-search column-icon"
        style="color: #AEAEAE;font-size: 25upx;"
        @tap="search"
      ></view>
	  <view class="uni-form-item uni-column sousuo-txt">
	      <input class="sousuo-input"  @tap="search" style="font-size: 4upx;outline: none" />
	      <!-- <input class="uni-input sousuo-input" focus placeholder="点击搜索" @tap="search" style="font-size: 4upx;" /> -->
	  </view>
	  <!-- 导航更多按钮 -->
      <view class="iconfont icon-Rectangle nav-more" @tap="skipToColumnList"></view>
    </view>
    <view style="height: 192upx;"></view>
    <swiper
      :current="tabIndex"
      :style="'height:' + scrollH + 'px;'"
      @change="swiperChange"
    >
      <swiper-item
        v-for="(item, index) in titleList"
        :key="index"
      >
        <scroll-view
          scroll-y="true"
          @scroll="scroll"
          :scroll-top="scrollTop"
          :lower-threshold="80"
          @scrolltolower="loadMore"
          :style="'height:' + scrollH + 'px;'"
        >
          <view
            class="d-flex flex-column"
            v-if="index === tabIndex"
          >
            <!-- 加载中 -->
            <template>
              <view
                v-show="isShowLoading"
                class=""
                :style="'height:' + scrollH + 'px;background-color: #f5f5f5;'"
              >
                <!-- <view class="circle" style="height: 500upx;">
									<span class="ouro ouro3">
									    <span class="left"><span class="anim"></span></span>
									    <span class="right"><span class="anim"></span></span>
									</span>
								</view> -->
                <view
                  class="d-flex a-center j-center"
                  style="height: 600upx;"
                >
                  <image
                    src="../../static/images/loading1.gif"
                    style="height: 75upx;width: 75upx;"
                  ></image>
                </view>
              </view>
            </template>
            <view
              v-show="!isShowLoading"
              v-for="(item, idx) in mainContentList"
              :key="idx"
            >
              <!-- 轮播图组件 -->
              <template v-if="item.module === 'sylbt' && item.list.length > 0">
                <swiper-custom :dataList="item.list"></swiper-custom>
              </template>
              <!-- <sun-divider v-if="item.module === 'sylbt' && item.list.length > 0" style="margin-left: 15px; margin-right: 15px;"></sun-divider> -->
              <!-- 快讯组件 -->
              <template v-if="item.module === 'kx' && item.list.length > 0">
                <news-flash :list="item.list"></news-flash>
              </template>
              <!-- <sun-divider v-if="item.module === 'kx' && item.list.length > 0"></sun-divider> -->
              <!-- 横向房价滚动栏 -->
              <template v-if="item.module === 'lpxq' && item.list.length > 0">
                <house-slide :dataList="item.list"></house-slide>
              </template>
              <!-- 新闻推荐位	 -->
              <template v-if="item.module === 'xwtjw' && item.list.length > 0">
                <news-list-module :newsList="item.list"></news-list-module>
              </template>
              <!-- PDF下载 -->
              <template v-if="item.module === 'pdf'">
                <load-module></load-module>
              </template>
              <!-- 推荐位 -->
              <template v-if="item.module === 'tjw' && item.list.length > 0">
                <!-- 专题 -->
                <subject-module
                  v-if="item.list[0].type === 'SPECIAL'"
                  :content="item.list[0]"
                ></subject-module>
                <!-- 广告 -->
                <poster-module
                  v-if="item.list[0].type === 'ADVERTISEMENT'"
                  :item="item.list[0]"
                ></poster-module>
                <!-- 视频 -->
                <video-item
                  v-if="item.list[0].type === 'VIDEO'"
                  :item="item.list[0]"
                ></video-item>
              </template>
              <!-- 新闻视频 -->
              <template v-if="item.moduleType === 'xwsp' && item.list.length > 0">
                <video-item :item="item.list[0]"></video-item>
              </template>
              <!-- 轮播广告 -->
              <template v-if="item.moduleType === 'gg' && item.list.length > 0">
                <swiper-adver :dataList="item.list"></swiper-adver>
              </template>
              <!-- 专题 -->
              <template v-if="item.moduleType === 'zt' && item.list.length > 0">
                <subject-module :content="item.list[0]"></subject-module>
              </template>
              <!-- 一般栏目 -->
              <!--<sun-divider v-if="item.moduleType === 'channel' && item.list.length > 0"></sun-divider>-->
              <template v-if="item.moduleType === 'channel' && item.list.length > 0">
                <column-block :dataObj="item"></column-block>
              </template>
              <!-- 问吧栏目 -->
              <!--<sun-divider v-if="item.moduleType === 'wb' && item.list.length > 0"></sun-divider>-->
              <template v-if="item.moduleType === 'wb' && item.list.length > 0">
                <question-block :dataObj="item.list[0]"></question-block>
              </template>
			  
              <!-- 专家评楼 9.15-->
              <!-- <sun-divider v-if="item.moduleType === 'zjpl'"></sun-divider>
              <template v-if="item.moduleType === 'zjpl'">
                <export-block :dataObj="item"></export-block>
              </template> -->
			  
              <!-- 以下为无限下拉板式 -->
              <template v-if="item.type === 'BAR'">
                <question-block :dataObj="item"></question-block>
              </template>
              <template v-if="item.type === 'SMALL_IMAGE_CONTENT'">
                <news-item
                  :isSingle="true"
                  :item="item"
                ></news-item>
              </template>
              <template v-if="item.type === 'BIG_IMAGE_CONTENT'">
                <news-item-big
                  :isSingle="true"
                  :item="item"
                ></news-item-big>
              </template>
              <template v-if="item.type === 'SMALL_IMAGE_POSITION'">
                <news-item
                  :isSingle="true"
                  :item="item"
                  :isRecommend="true"
                ></news-item>
              </template>
              <template v-if="item.type === 'BIG_IMAGE_POSITION'">
                <news-item-big
                  :isSingle="true"
                  :item="item"
                  :isRecommend="true"
                ></news-item-big>
              </template>
              <template v-if="item.type === 'VIDEO'">
                <video-item :item="item"></video-item>
              </template>
              <template v-if="item.type === 'ADVERTISEMENT'">
                <poster-module :item="item"></poster-module>
              </template>
              <template v-if="item.type === 'SPECIAL'">
                <subject-module :content="item"></subject-module>
              </template>
            </view>
            <sun-divider></sun-divider>
            <!-- 加载更多 -->
            <view class="d-flex a-center j-center font-md py-2">{{ currentLoadText }}</view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
    <view
      class="scroll-to-top"
      @click="goTop()"
    ><text style="font-size: 32upx;">Top</text></view>
  </view>
</template>

<script>
import newsItem from '@/components/module/news-item.vue';
import newsItemBig from '@/components/module/news-item-big.vue';
import swiperCustom from '@/components/common/swiper-customs.vue';
import sunDivider from '@/components/common/sun-divider.vue';
import cardItem from '@/components/module/card-item.vue';
import newsListModule from '@/components/module/news-list-module.vue';
import posterModule from '@/components/module/poster-module.vue';
import subjectModule from '@/components/module/subject-module.vue';
import videoItem from '@/components/module/video-item.vue';
import loadModule from '@/components/module/load-module.vue';
import swiperAdver from '@/components/common/swiper-adver.vue';
import columnBlock from './templates/column-block.vue';
import newsFlash from '@/components/module/news-flash.vue';
import houseSlide from '@/components/module/house-slide.vue';
import questionBlock from './templates/question-block.vue';
import exportBlock from './templates/export-block.vue';
import api from '@/common/lib/request.js';
import version from '@/mixins/version'
export default {
  mixins: [version],
  data() {
    return {
      scrollH: 500,
      title: 'Hello',
      isShowLoading: false,
      tabIndex: 0,
      scrollTop: 0,
      old: {
        scrollTop: 0
      },
      currentPageNo: 1,
      currentSite: 0,
      infinitePageNo: 1,
      titleLists: [
        {
          channelName: '首页',
          channelId: 0
        }
      ],
      titleList: [],
      scrollPosition: 'item0',
      mainContentList: [],
      // newsList: [],
      currentNewsStart: 0,
      isHomePage: true,
      currentLoadText: '上拉加载更多',
      loadStatus: ['上拉加载更多', '加载中', '加载完毕！'],
      locationInfo: ''
    };
  },
  components: {
    newsItem,
    newsItemBig,
    swiperCustom,
    sunDivider,
    cardItem,
    newsListModule,
    posterModule,
    subjectModule,
    loadModule,
    videoItem,
    swiperAdver,
    columnBlock,
    newsFlash,
    houseSlide,
    questionBlock,
    exportBlock
  },
  onLoad() {
    uni.getSystemInfo({
      success: res => {
        this.scrollH = res.windowHeight - uni.upx2px(106);
		//刘海屏自适应高度
		if(res.model.indexOf('iPhone X') != -1 || res.model.indexOf("iPhone XR") != -1  || res.model.indexOf("iPhone XS Max") != -1){
			this.fit = true
		}else{
			this.fit = false;
		}
      }
    });
  },
  onShow() {
    let locationInfo = uni.getStorageSync('location');
    if (locationInfo) {
      this.locationInfo = JSON.parse(locationInfo);
    } else {
      this.locationInfo = {
        id: 1,
        name: '全国'
      };
      uni.setStorageSync('location', JSON.stringify(this.locationInfo));
    }
    this.__initMainContentList(this.currentPageNo, this.currentSite);
    this.__initChannelList();
  },
  // 导航栏自定义按钮点击事件
  onNavigationBarButtonTap(e) {
    uni.navigateTo({
      url: '/pages/specialPage/addressSelector/addressSelector'
    });
    // // #ifdef APP-PLUS
    // const webView = this.$mp.page.$getAppWebview();
    // // #endif
    // console.log(webView);
  },
  onPullDownRefresh() {
  },
  methods: {
    skipToCitySwitchPage(name) {
      uni.navigateTo({
        url: '/pages/specialPage/addressSelector/addressSelector?name=' + name
      });
    },
    /**
     * 初始化channel list数据
     */
    __initChannelList() {
      api.request({
        url: '/channel/list'
      })
        .then(response => {
          if (response.length > 0) {
            this.titleList = [...this.titleLists, ...response];
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //搜索
    search() {
      uni.navigateTo({
        url: '/pages/index/search/search'
      });
    },
    // 初始化首页内容
    __initMainContentList(pageNo, idx) {
      const _this = this;
      if (pageNo === 1) {
        this.isShowLoading = true;
      }
      api.request({
        url: '/home',
        data: {
          page: pageNo,
          siteId: this.currentSite
        }
      })
        .then(response => {
          if (idx !== _this.tabIndex) return;
          if (response.length > 0) {
            _this.currentPageNo++;
            _this.mainContentList = [..._this.mainContentList, ...response];
            _this.currentLoadText = _this.loadStatus[0];
            _this.isShowLoading = false;
          } else {
            _this.currentLoadText = _this.loadStatus[2];
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //初始化栏目列表页
    __initChannelContentList(pageNo, idx) {
      const _this = this;
      if (pageNo === 1) {
        this.isShowLoading = true;
      }
      api.request({
        url: '/channel/contents',
        data: {
          page: pageNo,
          channelId: this.currentSite
        }
      })
        .then(response => {
          if (idx !== _this.tabIndex) return;
          if (response.length > 0) {
            if (pageNo == 1) {
              let slideList = response.filter(item => {
                return item.type === 'SLIDESHOW';
              });
              let slideArr = [];
              if (slideList.length > 0) {
                slideArr.push({
                  module: 'sylbt',
                  title: '首页轮播图',
                  moduleType: 'sylbt',
                  list: slideList
                });
              }

              let noslideList = response.filter(item => {
                return item.type != 'SLIDESHOW';
              });
              _this.mainContentList = [...slideArr, ...noslideList];
            } else {
              _this.mainContentList = [..._this.mainContentList, ...response];
            }
            _this.currentPageNo++;
            _this.currentLoadText = _this.loadStatus[0];
            _this.isShowLoading = false;
          } else {
            _this.currentLoadText = _this.loadStatus[2];
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    __initInfiniteContent(pageNo) {
      const _this = this;
      api.request({
        url: '/home/list',
        data: {
          page: pageNo,
          siteId: this.currentSite
        }
      })
        .then(response => {
          if (response.length > 0) {
            _this.infinitePageNo++;
            _this.mainContentList = [..._this.mainContentList, ...response];
            _this.currentLoadText = _this.loadStatus[0];
          } else {
            _this.currentLoadText = _this.loadStatus[2];
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    /**
     * 切换顶部选项卡
     * @param {Object} index
     * @param {Object} channelId
     */
    switchTab(index, channelId) {
      if (index === this.tabIndex) {
        return;
      }
      this.isHomePage = channelId == 0 ? true : false;
      this.currentSite = channelId;
      this.mainContentList = [];
      this.currentPageNo = 1;
      this.tabIndex = index;
      if (this.isHomePage) {
        this.__initMainContentList(this.currentPageNo, index);
      } else {
        this.__initChannelContentList(this.currentPageNo, index);
      }
    },
    swiperChange(e) {
      let channelId = this.titleList[e.detail.current].channelId;
      let currentIdx = e.detail.current;
      if (currentIdx > 4) {
        this.scrollPosition = 'item' + (currentIdx - 2);
      } else if (currentIdx < 4) {
        this.scrollPosition = 'item0';
      }
      this.switchTab(e.detail.current, channelId);
    },
    skipToColumnList() {
      uni.navigateTo({
        url: '/pages/specialPage/columnList/columnList'
      });
    },
    refresherrefresh(e) {
      console.log(e)
    },
    loadMore() {
      console.log('>>> loadMore <<<')
      if (this.currentLoadText !== '上拉加载更多') {
        return;
      }
      this.currentLoadText = this.loadStatus[1];
      if (this.isHomePage) {
        if (this.currentPageNo > 1) {
          this.__initInfiniteContent(this.infinitePageNo);
        } else {
          this.__initMainContentList(this.currentPageNo, this.tabIndex);
        }
      } else {
        this.__initChannelContentList(this.currentPageNo, this.tabIndex);
      }
    },
    scroll: function (e) {
      this.old.scrollTop = e.detail.scrollTop;
    },
    goTop: function (e) {
      this.scrollTop = this.old.scrollTop;
      this.$nextTick(function () {
        this.scrollTop = 0;
      });
    },
  }
};
</script>

<style scoped>
.content{padding-top: 15upx;}
.fit{padding-top: 20upx;height: 20upx;width: 100%;}
.fixed-wrapper {
  position: fixed;
  padding-top: 52upx;
  top: 0;
  width: 100%;
  background-color: #ffffff;
  z-index: 999;
}

.scroll-to-top {
  position: fixed;
  text-align: center;
  line-height: 100upx;
  color: #003366;
  font-weight: bold;
  bottom: 108upx;
  right: 20upx;
  z-index: 999;
  width: 100upx;
  height: 100upx;
  border-radius: 50upx;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.custom-navbar {
  height: 88upx;
  width: 100%;
}

.options-card {
  height: 80upx;
  width: 100%;
}

.content {
  color: #333333;
}

.news-list-wrap-item {
  height: 171rpx;
}

.nav-bottom-select {
  border-bottom: 4upx solid #005bac;
  color: #005bac;
  margin-right: 5px;
}

.column-icon {
  position: fixed;
  left: 275upx;
  top: 72upx;
  font-size: 50upx;
  padding-left: 20upx;
  /* background-color: #ffffff; */
  background-color: #f7f7f7;
  z-index:99;
}
.sousuo-txt{
	position: fixed;
	left: 200upx;
	top: 55upx;
	width: 100upx;
	height: 20upx;
	font-size: 50upx;
	
}
.sousuo-input{
	position: fixed;
	left: 275upx;
	top: 68upx;
	font-size: 12upx;
	background-color: #ffffff;
	width: 190upx;
	height: 28upx;
	z-index: -9;
	background-color: #f7f7f7;
	padding-left: 70upx;
	padding-bottom: 10upx;
	padding-top: 10upx;
}
.nav-more{
	position: fixed;
	right: 0upx;
	top: 113upx;
	padding-right: 20upx;
	font-size: 50upx;
	padding-left: 20upx;
	background-color: #ffffff;
}
.scroll-row-item:first-child {
  margin-left: 0;
}

.scroll-row-item:last-child {
  margin-right: 100upx;
}
uni-page-body,uni-app{
	height: 101%!important;
}
/deep/.uni-scroll-view::-webkit-scrollbar {
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
display: none;
}
</style>